<template>
  <el-container style="background-color: #F0F3F5;">
    <el-container style="margin: 10px 0 10px 10px;width: 75%;">
      <el-header style="height: 300px;margin-bottom: 10px;">
          <div  class="flex-column-space-around" >
            <el-row>
              <el-col :span="0.5"><i class="el-icon-star-off" style="font-size: 25px;"></i> </el-col>
              <el-col :span="5" > <span style="color: #2381CA;font-size: 20px;font-weight: bold;">{{businessData.bussinessOpportunity}}</span> </el-col>
              <el-col :offset="15" :span="3"><el-button size="small" style="color: #C3C3C3;" @click="goBack">返回</el-button></el-col>
            </el-row>
            <div style="display: flex;justify-content: start;">
              所属客户：{{businessData.companyName}}
            </div>
            <el-divider></el-divider>
             <el-row type="flex" justify="space-between" align="top" >
               <el-col :span="21">
                <el-steps :active="active"  finish-status="success"  process-status="wait" :align-center="true" style="height: 70px;">
                  <el-step title="发现商机"  ></el-step>
                  <el-step title="获取商机线索" ></el-step>
                  <el-step title="接触准备" ></el-step>
                  <el-step title="需求分析" ></el-step>
                  <el-step title="交流沟通" ></el-step>
                  <el-step title="沟通达成阶段" ></el-step>
                  <el-step title="赢单" ></el-step>
                </el-steps>
               </el-col>
               <el-col :span="2" :offset="1">
                 <el-button  type="danger" @click="handleOrderLose" v-if="businessData.stage != '14'" :disabled="businessData.stage == '13'" round>输单</el-button>
                 <el-button  type="danger"  v-else round :disabled="businessData.stage == '13'">输单</el-button>

               </el-col>
             </el-row>
             <el-row type="flex" justify="end" v-if="!(businessData.stage == '13' || businessData.stage == '14')">
               <el-col :span="2"> <el-button size="small" type="text" class="el-icon-arrow-left"  @click="preStep" >上一阶段</el-button></el-col>
               <el-col :span="2"> <el-button size="small" type="text"  @click="nextStep">下一阶段<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-col>
              <el-col :span="2"><el-button size="small" type="primary" @click="handleStepChange">变更为当前</el-button></el-col>
             </el-row>
              <el-row :gutter="1">
               <el-col :span="2"> <el-button  type="primary" icon="el-icon-edit" @click="handleBusinessUpdate" size="small">编辑</el-button></el-col>
                <el-col :span="3"><el-button icon="el-icon-circle-plus-outline"  size="small">新建计划</el-button></el-col>
              </el-row>
            </div>
          </div>
      </el-header>

      <el-main style=" height: 50px; overflow-y: auto;" >
       <el-row>
         <el-col>
           <el-tabs  v-model="activeName" @tab-click="handleClick">
             <el-tab-pane label="商机信息" name="info">
               <business-opportunity-overview :form="businessData"/>
             </el-tab-pane>
             <el-tab-pane label="产品" name="product">
               <product-list :list="businessData.productList"></product-list>
              </el-tab-pane>
             <el-tab-pane :label="contacLabel" name="contact">
               <contact-info :contactList="contactList" :contactMap="contactMap" :loading="contactParmas.loading" />
               <pagination
                  v-show="contactParmas.total>0"
                  :total="contactParmas.total"
                  :page.sync="contactParmas.queryParams.pageNum"
                  :limit.sync="contactParmas.queryParams.pageSize"
                  @pagination="getContactList"
                />
              </el-tab-pane>
             <!-- <el-tab-pane :label="businessLabel" name="business">
              <business-opportunity-info :list="businessList" :loading="businessParmas.loading"/>
               <pagination
                  v-show="businessParmas.total>0"
                  :total="businessParmas.total"
                  :page.sync="businessParmas.queryParams.pageNum"
                  :limit.sync="businessParmas.queryParams.pageSize"
                  @pagination="getBusinessList"
                />
             </el-tab-pane> -->
             <el-tab-pane label="计划" name="plan">计划</el-tab-pane>
           </el-tabs>
         </el-col>
       </el-row>
      </el-main>
    </el-container >
    <el-aside style="margin: 10px;width: 25%;" >待开发</el-aside>

    <!-- 商机编辑-->
    <el-dialog :title="businessUpdateParams.title" :visible.sync="businessUpdateParams.open" width="900px"  append-to-body>
      <business-update :form="businessData"  :customerList="customerList" :productList="productList" @updateBusiness="updateBusiness" @addBusiness="addBusiness"/>
    </el-dialog>
    <!-- 输单-->
    <el-dialog :title="orderLoseParams.title" :visible.sync="orderLoseParams.open" width="500px"  append-to-body>
      <el-select v-model="orderLoseParams.ordeLoseReason" placeholder="请选择失单原因" class="w100" >
        <el-option
          v-for="dict in dict.type.zxcrm_order_loss"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        ></el-option>
      </el-select>
      <div slot="footer"  class="flex-right" >
        <el-button type=" info" @click="cancelOrderLose"  >取消</el-button>
        <el-button type="primary" @click="submitOrderLose"  >确 定</el-button>
      </div>
    </el-dialog>

  </el-container>
</template>

<script>
  import { listAllProduct } from "@/api/zxcrm/product"
  import { listBusinessOpportunity, getBusinessOpportunity, delBusinessOpportunity, addBusinessOpportunity, updateBusinessOpportunity } from "@/api/zxcrm/businessOpportunity"
  import { listAllContact,listContact,addContact} from "@/api/zxcrm/contact"
  import { listAllCustomer,getCustomer,addCustomer, updateCustomer,dealCustomer } from "@/api/zxcrm/customer"
  import customerOverview from "@/views/zxcrm/components/customerOverview.vue"
  import customerDetail from "@/views/zxcrm/components/customerDetail.vue"
  import contactInfo from "@/views/zxcrm/components/contactInfo.vue"
  import customerUpdate from "@/views/zxcrm/components/customerUpdate.vue"
  import contactUpdate from "@/views/zxcrm/components/contactUpdate.vue"
  import businessUpdate from "@/views/zxcrm/components/businessUpdate.vue"
  import businessOpportunityOverview from "@/views/zxcrm/components/businessOpportunityOverview.vue"
  import productList from "@/views/zxcrm/components/productList.vue"
  export default {
    name:"businessOpportunityInfo",
    dicts: ['zxcrm_customer_classify', 'zxcrm_customer_level', 'zxcrm_supplier_status', 'zxcrm_payment_cycle', 'zxcrm_supplier_payment_method', 'zxcrm_customer_relationship', 'zxcrm_main_sales_product', 'zxcrm_medicine_payment_method', 'zxcrm_supplier_type', 'zxcrm_customer_status', 'zxcrm_customer_type', 'zxcrm_supplier_level', 'zxcrm_customer_source', 'zxcrm_supplier_source','	zxcrm_input_method','zxcrm_order_loss'],
    components:{
      customerOverview,
      customerDetail,
      contactInfo,
      customerUpdate,
      contactUpdate,
      businessUpdate,
      businessOpportunityOverview,
      productList
    },
    data() {
      return{
        active:0,
        productList:[],
        activeName:'info',
        customerId:null,
        customerData:null,
        businessData:null,
        contactMap:null,
        contactList:[],
        contactAllList:[],
        height:null,
        contactLoading:false,
        customerUpdateParams:{
          title:"",
          open:false
        },
       contactForm:{},
       customerList:[],
       businessForm:{},
       orderLoseParams:{
          ordeLoseReason:null,
          title:"",
          open:false
        },
       businessUpdateParams:{
          title:"",
          open:false
        },
       contactUpdateParams:{
          title:"",
          open:false
        },
        contacLabel:'联系人',
        businessLabel:'商机',
        contactParmas:{
          queryParams:{
            pageNum:1,
            pageSize:10,
            customerId:null
          },
          total:0,
          loading:false
        },
        businessList:[],
        businessParmas:{
          queryParams:{
            pageNum:1,
            pageSize:10,
            customerId:null
          },
          total:0,
          loading:false
        }

      }
    },
    created() {
      // 获取路由参数
      this.getRouteParams()
    },
    methods:{

      stepToStage(step){
        switch(step){
          case 1 : return '1';
          case 2 : return '2' ;
          case 3 : return '4';
          case 4 : return '5';
          case 5 : return '8';
          case 6 : return '9';
          case 7 : return '13';
        }
      },
      stageToStep(stage){
        switch(stage){
          case '1' : return 1;
          case '2' : return 2 ;
          case '4' : return 3;
          case '5' : return 4;
          case '8' : return 5;
          case '9' : return 6;
          case '13' : return 7;
          default : return 0;
        }
      },
      handleStepChange(){
        this.updateBusinessOpportunity({id:this.businessData.id,stage:this.stepToStage(this.active)})
      },
      submitOrderLose(){
        if(!this.orderLoseParams.ordeLoseReason){
            this.$modal.msgError("请选择失单原因")
            return
        }
        this.updateBusinessOpportunity({id:this.businessData.id,stage:'14',orderLoseReason:this.orderLoseParams.ordeLoseReason})
      },
      updateBusinessOpportunity(data){
        updateBusinessOpportunity(data).then(res=>{
          this.$modal.msgSuccess("变更成功")
          this.getBusiness()
          this.orderLoseParams.open = false
        })
      },
      cancelOrderLose(){},
      handleOrderLose(){
        this.orderLoseParams.title="失单原因"
        this.orderLoseParams.open=true
      },
      preStep(){
        if(--this.active < 0) this.active=1
      },
      nextStep(){
        if(++this.active > 7) this.active=7
        if(this.active == 7){
          this.$modal.confirm("确定将商机阶段修改为【赢单】?").then(()=>{
             this.updateBusinessOpportunity({id:this.businessData.id,stage:this.stepToStage(this.active)})
          })
        }
      },
      handleDeal(){
        this.$modal.confirm("是否成交?").then(()=>{
          dealCustomer({id:this.customerData.id,dealStatus:'1'}).then(res=>{
            this.modal.msgSuccess("已成交")
            this.getCustomer()
          })
        })
      },
      getAllProduct(){
        listAllProduct().then(res=>{
          this.productList = res.data
        })
      },
      /** 客户列表 */
      getCustomerList(){
        listAllCustomer().then(res=>{
          this.customerList = res.data
        })
      },
      updateBusiness(e){
        updateBusinessOpportunity(e).then(res=>{
          this.$modal.msgSuccess("修改成功")
          this.getBusiness()
          this.businessUpdateParams.open = false
        })
      },
      addBusiness(e){
        addBusinessOpportunity(e).then(res=>{
          this.$modal.msgSuccess("添加成功")
          this.getBusinessList()
          this.businessUpdateParams.open = false
        })
      },
      updateContact(e){

      },
      addContact(e){
        addContact(e).then(res=>{
          this.$modal.msgSuccess("添加成功")
          this.getContactAllList()
          this.getContactList()
          this.contactUpdateParams.open = false
        })
      },
      addCustomer(e){

      },
      updateCustomer(e){
        updateCustomer(e).then(response => {
          this.$modal.msgSuccess("修改成功")
          this.customerUpdateParams.open = false
          this.getCustomer()
        })
      },
      handleBusinessUpdate(){
        this.businessForm = {'customerId':Number(this.customerId),'productList':[],"disabled":true}
        this.getCustomerList()
        this.getAllProduct()
        this.businessUpdateParams.title = "新建商机"
        this.businessUpdateParams.open =true
      },
      handleContactUpdate(){
        this.contactForm = {customerId:Number(this.customerId)}
        this.getContactAllList()
        this.getCustomerList()
        this.contactUpdateParams.title = "新增联系人"
        this.contactUpdateParams.open =true
      },
      handleCustomerUpdate(){
        this.customerUpdateParams.title = "商机信息编辑"
        this.customerUpdateParams.open =true
      },
      getBusinessList(){
        this.businessParmas.loading = true
        listBusinessOpportunity(this.businessParmas.queryParams).then(response => {
          this.businessList = response.rows
          this.businessParmas.total = response.total
           this.businessParmas.loading = false
           this.businessLabel = '商机('+this.businessList.length+')'
        })
      },
      getContactList() {
        this.contactParmas.loading = true
        listContact(this.contactParmas.queryParams).then(response => {
          this.contactList = response.rows
          this.contactParmas.total = response.total
           this.contactParmas.loading = false
           this.contacLabel = '联系人('+this.contactList.length+')'
        })
      },
      getContactAllList(){
        listAllContact().then(res=>{
          this.contactAllList = res.data
          this.contactMap = res.data.reduce((map,item)=>{
            map[item.id] = item.name
            return map
          },{})
        })
      },
      goBack(){
        this.$router.go(-1)
      },
      getRouteParams(){
         this.businessId = this.$route.query.id
         this.getBusiness()
         this.getContactAllList()
      },
      getBusiness(){
        getBusinessOpportunity(this.businessId).then(res=>{
          this.businessData = res.data
          this.contactParmas.queryParams.customerId = this.businessData.customerId
          this.active = this.stageToStep(this.businessData.stage)
        })
      },
      getCustomer(){
        getCustomer(this.customerId).then(res=>{
          this.customerData = res.data
        })
      },
      handleClick(tab, event){
        if(tab.name == "contact"){
          this.getContactAllList()
          this.getContactList()
        }else if(tab.name == "info"){
          this.getBusiness()
        }else if(tab.name == "detail"){
          this.getCustomer()
          this.getContactAllList()
        }else if(tab.name == "business"){
          this.getBusinessList()
        }
      },
    }

  }
</script>

<style >
  .el-header {
     background-color: white;
     color: #333;
     text-align: center;
     height: 100vh;
   }
   .el-aside {
      background-color: white;
      color: #333;
      text-align: center;
      height: 100vh;
    }

    .el-main {
      background-color: white;
      color: #333;

    }

</style>
